<template>
	<ls-page title="">
		<!-- 选项卡start -->
		<view class="tabs-contianr">
			<TabList :list="tabList" v-model:activeIndex="activeIndex" @tabClick="handleTabClick" />
		</view>
		<!-- 选项卡end -->
		<view class="page-content">
			<scroll-view class="myBook-container-main" @scrolltolower="scrollToLower" :scroll-y="true"
				lower-threshold="200" v-if="menuList.length">
				<view class="container-main-item" v-for="(item, k) in menuList" :key="k">
					<view class="item-header">
						<view class="item-header-left">预订单号:{{ item.code }}</view>
						<view class="item-header-right">{{ item.stateDesc }}</view>
					</view>

					<view class="item-center">
						<view class="item-center-shop">{{ item.orgName }}</view>
						<view class="item-center-top">
							<view class="top-title">{{ item.roomName }}</view>
							<view class="top-value">{{ item.typeName }}</view>
						</view>
						<view class="item-center-li">
							<view class="li-title">到店时间：</view>
							<view class="li-value">{{ item.reserveTime || '--' }}</view>
						</view>
						<view class="item-center-li">
							<view class="li-title">预留时间：</view>
							<view class="li-value">{{ item.keepTime }}</view>
						</view>
						<view class="item-center-li">
							<view class="li-title">人数：</view>
							<view class="li-value">{{ item.peopleNumber }}人</view>
						</view>
						<view class="item-center-li">
							<view class="li-title">姓名：</view>
							<view class="li-value">{{ item.memberName }}</view>
						</view>
						<view class="item-center-li">
							<view class="li-title">电话：</view>
							<view class="li-value">{{ item.memberMobile }}</view>
						</view>
						<view class="item-center-li">
							<view class="li-title">操作时间：</view>
							<view class="li-value">{{ item.crDate }}</view>
						</view>
						<view class="item-center-li" style="padding-bottom: 0rpx">
							<view class="li-title">备注：</view>
							<view class="li-value">{{ item.remark }}</view>
						</view>
					</view>

					<view class="item-reason" v-if="item.state == '0'">
						取消原因：{{ item.cancelReason ? item.cancelReason : '无' }}</view>

					<!-- 已预定商品信息 -->

					<view v-if="item.consumeCode">
						<view class="orderDetails">
							<!-- 稍后优化下动效 待定 -->
						<!-- 	<view style="display: flex; flex-direction: row; height: 80rpx; line-height: 80rpx">
								<view style="color: #212121">预点商品</view>
								<view @tap="preFlagFun" :id="k" :data-set="item"
									style="margin-left: 16rpx; height: 88rpx">
									
									<image v-if="!item.preDetailsCheck"
										src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/common/i_radio_bottom.png"
										mode="aspectFill" style="width: 32rpx; height: 32rpx; margin-top: 28rpx" />
									<image v-if="item.preDetailsCheck"
										src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/common/i_radio_bottom.png"
										mode="aspectFill"
										style="width: 32rpx; height: 32rpx; margin-top: 28rpx; transform: rotate(180deg)" />
								</view>
							</view> -->
						</view>

						<!-- 循环商品前 需要判断 是否有商品 -->
						<view v-if="item.preDetailsCheck">
							<!-- 商品信息（单品或者套餐） -->
							<view v-for="(preItem, preIndex) in preDetailsModal.GoodsList" :key="preIndex">
								<!-- 套餐 -->

								<view class="orderDetails" v-if="preItem.SubGoods" style="margin-top: 10rpx">
									<image v-if="preItem.Attachment" :src="preItem.Attachment" mode="aspectFill"
										class="orderImg" />
									<image v-if="!preItem.Attachment"
										src="https://oss.jtmckj.com/public/goods/goods_default.png" mode="scaleToFill"
										class="orderImg" />
									<view class="orderInfo">
										<view class="goodsName"
											style="display: flex; flex-direction: row; justify-content: space-between; width: 100%">
											<view style="overflow-x: hidden">
												<text style="color: #2bbcd9">套餐</text>
												{{ preItem.GoodsName }}
											</view>
											<view @tap="preSubFlagFun" :id="preIndex" :data-set="preItem"
												style="width: 32rpx; margin-left: 35rpx; text-align: right; height: 46rpx">
												<image v-if="!preItem.preSubDetailsCheck"
													src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/common/i_radio_bottom.png"
													mode="aspectFill"
													style="width: 32rpx; height: 32rpx; margin-top: 7rpx" />
												<image v-if="preItem.preSubDetailsCheck"
													src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/common/i_radio_bottom.png"
													mode="aspectFill"
													style="width: 32rpx; height: 32rpx; margin-top: 7rpx; transform: rotate(180deg)" />
											</view>
										</view>
										<view style="color: #666; font-size: 24rpx">规格：{{ preItem.Flavor }}</view>
										<view class="goodsPrice">
											<view>¥{{ preItem.TotalAmt }}</view>
											<view class="goodsCount">x{{ preItem.OrderQty }}</view>
										</view>
										<!-- 套餐下的商品列表信息 -->
										<view v-if="preItem.preSubDetailsCheck">
											<view class="goodsPack"
												v-for="(subPreItem, subPreIndex) in preItem.SubGoods"
												:key="subPreIndex">
												<view class="packItem" v-if="subPreItem.OrderQty > 0">
													<view class="packTop">
														<view class="packGoodsName">{{ subPreItem.GoodsName }}</view>
														<view style="color: #fff">¥{{ subPreItem.TotalAmt }}</view>
													</view>
													<view class="packBottom">
														<view>规格：{{ subPreItem.Flavor }}</view>
														<view>x{{ subPreItem.OrderQty }}</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>

								<!-- 单品 -->

								<view class="orderDetails" v-if="!preItem.SubGoods" style="margin-top: 10rpx">
									<image v-if="preItem.Attachment" :src="preItem.Attachment" mode="scaleToFill"
										class="orderImg" />
									<image v-if="!preItem.Attachment"
										src="https://oss.jtmckj.com/public/goods/goods_default.png" mode="scaleToFill"
										class="orderImg" />
									<view class="orderInfo">
										<view class="goodsName">
											<text style="color: #ffdd99">单品</text>
											{{ preItem.GoodsName }}
										</view>
										<view class="goodsSpecs">规格：{{ preItem.Flavor }}</view>
										<view class="goodsPrice">
											<view>¥{{ preItem.TotalAmt || 0 }}</view>
											<view class="goodsCount">x{{ preItem.OrderQty || 0 }}</view>
										</view>
									</view>
								</view>
							</view>
							<!-- 支付信息 -->
							<view class="orderDetails">
								<view class="pre-lable">下单时间</view>
								<view class="pre-value">{{ preDetailsModal.OrderTime }}</view>
							</view>
							<view class="orderDetails">
								<view class="pre-lable">订单金额</view>
								<view class="pre-value">{{ preDetailsModal.TotalAmt }}</view>
							</view>
							<view class="orderDetails">
								<view class="pre-lable">优惠金额</view>
								<view class="pre-value" style="color: #ff3333">{{ preDetailsModal.Coin }}</view>
							</view>
							<view class="orderDetails">
								<view class="pre-lable">支付时间</view>
								<view class="pre-value">{{ preDetailsModal.LastTime || '无' }}</view>
							</view>
							<view class="orderDetails">
								<view class="pre-lable">支付方式</view>
								<view class="pre-value">{{ preDetailsModal.PayTypeName }}</view>
							</view>
							<view style="height: 40rpx"></view>
						</view>
					</view>

					<view class="item-footer" v-if="item.state == '1'">
				<!-- 		<view v-if="!item.consumeCode && isReserveOrder" class="item-footer-btn" @tap="preOrder" :id="k"
							:data-set="item">预点单</view> -->
						<view class="item-footer-btn" @click="call(item)">联系门店</view>
						<view class="item-footer-btn" @click="cancle(item.code)" :id="k">取消预订</view>
					</view>
				</view>
			</scroll-view>
			<view class="myBook-container-empty" v-else>
				<image v-if="themetype == '001' " class="empty-img" src="https://oss.jtmckj.com/h5-uniapp/qnig/my/i_icon_none.png"
				mode="aspectFill" />
				<image v-else  class="empty-img" src="https://oss.jtmckj.com/wmp/kbq/order/i_icon_empty.png"
					mode="aspectFill" />
				<view class="empty-title">暂无预订，快去订台吧~</view>
				<view class="bottom-button" @tap="toOrder">去订台</view>
			</view>
		</view>

		<!-- 联系门店 -->
		<x-popup position="center" :show="callShow" :closeIcon="true" @update:show="callShow = $event">
			<view class="call-container">
				<view class="phone-value">{{ shopMobile }}</view>
				<view class="phone-title">门店电话</view>
				<image class="phone-icon" src="https://oss.jtmckj.com/wmp/qnjg/pre/i_tel.png" mode="aspectFill"
					@click="onCall" />
			</view>
		</x-popup>

		<!-- 取消预订 -->

		<x-popup position="center" :show="cancleShow" title="取消预订"  :closeIcon="true"
			@update:show="cancleShow = $event">
			<view class="cancle-container">
				<view class="cancle-container-choose">
					<view class="title">选择原因</view>
					<view class="choose-reason" @click="typeShow = true">
						{{ reasonText }}
					</view>
				</view>
				<!-- <view class="cancle-container-other" :style="'display:' + (otherReasons ? 'block' : 'none')"> -->
				<view class="cancle-container-other" v-if="reasonText =='其它'">
					<view class="title">其它原因</view>
					<view class="other-reason">
						<!-- <van-field v-model="message" type="textarea" placeholder="请输入原因" autosize :border="false"
							custom-class="textarea" input-class="textarea-input" @change="onChange" /> -->
						<u--textarea v-model="message" placeholder="请输入内容"></u--textarea>
					</view>
				</view>
				<view :style="'height:' + (otherReasons ? '0' : '60rpx')"></view>
				<view class="cancle-container-bottom">
					<view class="btn-cancle" @click="cancleShow = false">关闭</view>
					<view class="btn-comfirm" @tap="confirmCancle">确认取消</view>
				</view>
			</view>
		</x-popup>
		<!-- 预点单须知 -->
		<x-popup position="center" :show="preBookShow" title="预点单须知" :closeIcon="true"
			@update:show="preBookShow = $event">
			<view class="pre-book">
				<view class="pre-book-title">预点单须知</view>
				<view class="pre-book-main">
					<view class="main-item">1.预点单享菜品优惠价</view>
					<view class="main-item">2.预点单只可点餐一次</view>
					<view class="main-item">3.如果您取消该次预定，您的预点单的金额将进入会员卡余额中</view>
				</view>
				<view class="pre-book-bottom">
					<view class="btn-cancle" @click="preBookShow = false">取消</view>
					<view class="btn-comfirm" @tap="confirmPreBook">确定</view>
				</view>
			</view>
		</x-popup>



		<up-picker :show="typeShow"  title="选择类型" ref="uPickerRef" @close="typeShow = false"
			 @cancel="typeShow = false" keyName="name" :columns="reasonColumns"
			@confirm="typeConfirm"></up-picker>
	</ls-page>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onUnload, onShow, onHide } from '@dcloudio/uni-app';
	import { HFiveAppObjProcess, HFiveMemberAppObjProcess } from '@/api/public.js'

	// -------------------------------------------------------初始化数据-----------------------------------------------------
	const shopInfo = uni.getStorageSync('shopInfo') //门店信息
	const userInfo = uni.getStorageSync('userInfo') //用户信息
	const themetype = uni.getStorageSync('themeInfo')?.type
	console.log(shopInfo, 'shopInfo--------------')
	console.log(userInfo, 'userInfo--------------')

	const tabList = [
		{ name: '今日预订' },
		{ name: '历史预订' }
	];

	const activeIndex = ref(0);
	// 模拟数据
	const menuList = ref([])

	const callShow = ref(false)
	const cancleShow = ref(false)


	// ---------------选择类型------------------
	const typeText = ref('请选择原因')
	const typeShow = ref(false);
	const reasonColumns = ref([]);

	const preBookShow = ref(false) //预点单弹窗
	const isReserveOrder = ref(false) //是否关闭预订单
	const postForm = ref({
		memberMobile: userInfo.mobile, // 我的电话
		dateType: '1', // 1今日 2历史
		pageSize: '15',
		pageIndex: '1',
		state: '0,1,2' //state预定状态 0取消 1预定 2到达，多个状态用逗号隔开1,2
	})
	const canclePostForm = ref({
		code: '',
		reason: ''
	})

	const reasonText = ref('请选择原因')
	const isSelected = ref(false)
	const reasonShow = ref(false);
	const hasMore = ref(false); // 是否还有更多
	const toolIndex = ref(-1) //工具
	const shopMobile = ref('') //门店电话
	const message = ref('')
	const otherReasons = ref(false)
	// -------------------------------------------------------初始化数据-----------------------------------------------------

	onLoad((options) => {
		getBooks(true)
		getCancleReasons()
	})

	onShow(() => {
		isReserveOrder.value = shopInfo.isReserveOrder
		const pages = getCurrentPages();
		console.log(pages, 'dfsada')
		// 检查当前页面的路径并设置 backFn
		if (pages[0].route === 'pages/account/firing/firing' || pages[0].route === 'pages/center/myBook/index') {
			backFn.value = () => {
				// 执行跳转到首页
				uni.reLaunch({
					url: '/pages/home/index'
				});
			};
		}
	});


	const typeConfirm = (e) => {
		reasonText.value = e.value[0].name
		typeShow.value = false
	}

	const handleTabClick = (e) => {
		if (e.index === 1) {
			postForm.value.dateType = '2'
			postForm.value.state = '0,1,2'
		} else {
			postForm.value.dateType = '1'
			postForm.value.state = '0,1,2'
		}
		getBooks(true)
	}


	// --------------------------------- 取消预订 --------------------------
	const cancle = (code) => {
		canclePostForm.value.code = code
		cancleShow.value = !cancleShow.value
	}

	const closeCancle = () => {
		cancleShow.value = false,
			reasonText.value = '请选择原因'
		isSelected.value = false
	}

	// 确定取消
	const confirmCancle = () => {
		uni.showLoading({ title: "加载中", mask: true });
		if (reasonText.value == '请选择原因') {
			uni.showToast({
				title: '请选择原因',
				icon: 'none'
			});
			return
		}

		if (reasonText.value != '请选择原因' || reasonText.value != '其它') {
			canclePostForm.value.reason = reasonText.value
		}
		if (message.value) {
			canclePostForm.value.reason = message.value
		}


		let sendModal = { "functionName": "CancelReserve_H5", "contentData": canclePostForm.value }
		HFiveMemberAppObjProcess(sendModal).then(res => {
			uni.hideLoading();
			uni.showToast({ title: '取消预订成功', icon: 'none' });
			message.value = ''
			cancleShow.value = !cancleShow.value
			reasonText.value = '请选择原因'
			isSelected.value = false
			getBooks(true) // 再获取一下数据
		})
	}


	// 选择原因
	const openReasons = () => {
		reasonShow.value = !reasonShow.value;
	};

	// 取消选择原因
	const reasonCancel = () => {
		reasonShow.value = false;
		reasonText.value = '请选择原因';
		isSelected.value = false;
		otherReasons.value = false;
	};
	// 确认选择原因
	const reasonConfirm = (e) => {
		reasonText.value = e.detail.name;
		reasonShow.value = false;
		isSelected.value = true;
		if (e.detail.name === '其它') {
			otherReasons.value = true;
		} else {
			otherReasons.value = false;
		}
	};


	// --------------------------------- 联系门店 -----------------------------

	// 去预点单
	const preOrder = (e) => {
		toolIndex.value = e.currentTarget
		preBookShow.value = true
	}

	// 预点单弹窗取消
	const canclePre = () => {
		preBookShow.value = false
	}

	const confirmPreBook = () => {
		app.global.scanData = {
			code: menuList.value[toolIndex.value.id].roomCode
		}
		// 获取当前房台的消费单号  如果有消费单号  说明已经开台，不能预点单
		Api.Common.AppObjProcess.Do({
			"functionName": "GetCurrentRoomComsume_H5",
			"contentData": {
				"roomCode": app
					.global.scanData.code
			}
		}).then(res => {
			// console.log(res);
			if (res) {
				wx.showToast({ title: '该房台已开台，无法预点单', icon: 'none' });
				return
			} else {
				// // console.log('this.data.toolIndex.dataset.set:',this.data.toolIndex.dataset.set) 
				wx.navigateTo({
					url: '../../home/order/order?orderType=' + 'isPre' + '&preOrderInfo=' +
						encodeURIComponent(JSON.stringify(toolIndex.dataset.set)),
				})
				preBookShow.value = false // 预点单弹窗

			}
		})

	}

	const call = (v) => {
		callShow.value = true
		shopMobile.value = v.telephone
	}

	const onCall = () => {
		uni.makePhoneCall({
			phoneNumber: shopMobile.value
		})
		callShow.value = !callShow.value
	}

	const cancleCall = () => {
		callShow.value = false
	}

	// 去订台
	const toOrder = () => {
		if (userInfo.isBlockReverse !== '1') {
			uni.navigateTo({
				url: '/subpkg/view/book/book'
			})
		} else {
			uni.showToast({
				title: '未开放此功能',
				icon: 'none'
			})
		}
	}

	// 获取取消原因
	const getCancleReasons = () => {
		HFiveMemberAppObjProcess({ "functionName": "GetDicData_H5", "contentData": { "parentCode": "106" } }).then(
			res => {
				reasonColumns.value = [res]
				console.log(reasonColumns.value, 'reasonColumns.value')
			})
	}

	// 获取预订信息 initData
	const getBooks = (flag) => {
		if (flag) {
			postForm.value.pageIndex = '1'
			hasMore.value = true
		}
		let sendModal = { "functionName": "GetReserveList_H5", "contentData": postForm.value }
		HFiveMemberAppObjProcess(sendModal).then(res => {
			let resultArr = res
			resultArr = resultArr.map(item => ({ ...item, preDetailsCheck: false })); // 列表中的详细信息开关 
			menuList.value = resultArr
		})
	}

	// 预点单信息 显示开关
	const preFlagFun = (e) => {
		menuList.value.forEach((item, index) => {
			index === Number(e.currentTarget.id) && e.currentTarget.dataset.set.preDetailsCheck !== true ? item
				.preDetailsCheck = true : item.preDetailsCheck = false;
		});

		let senfModal = { "functionName": "MemberOrderInfoBefore", "contentData": { "consumeCode": e.currentTarget
					.dataset.set.consumeCode } }
		HFiveMemberAppObjProcess(senfModal).then(res => {

			res?.GoodsList.forEach((item) => {
				item?.SubGoods ? item['preSubDetailsCheck'] = false : ''
			})
			preDetailsModal.value = res

		})
	}

	// 触底
	const scrollToLower = () => {
		console.log('触底')
		if (!hasMore.value) return
		postForm.value.pageIndex++
		let sendModal = { "functionName": "GetReserveList_H5", "contentData": postForm.value }
		HFiveMemberAppObjProcess(sendModal).then(res => {

			let resultArr = res
			resultArr = resultArr.map(item => ({ ...item, preDetailsCheck: false })); // 列表中的详细信息开关
			hasMore.value = res.length > 0
			menuList.value = [...menuList.value, ...resultArr]
		})
	}
</script>

<style lang="less" scoped>
	.tabs-contianr {
		// background: var(--maincolor);
		padding: 0 140rpx 0 140rpx;
		border-bottom: 1rpx solid var(--maincolorbd);
	}

	.page-content {
		padding: 24rpx;
	}


	.myBook-container-main {
		overflow: hidden;
		height: 85vh;

		.container-main-item {
			background: var(--maincolor);
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			.item-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 38rpx 24rpx 26rpx;
				border-bottom: 1px solid var(--line-self--color);

				.item-header-left {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: var(--maincolorf1);
					line-height: 26rpx;
				}

				.item-header-right {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: var(--maincolorf4);
					line-height: 26rpx;
				}
			}

			.item-center {
				padding: 24rpx 40rpx;

				.item-center-shop {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: var(--maincolorf1);
					line-height: 28rpx;
					padding-bottom: 23rpx;
				}

				.item-center-top {
					display: flex;
					align-items: flex-end;
					padding: 16rpx 0 20rpx 0;

					.top-title {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 48rpx;
						color: var(--maincolorf1);
						line-height: 48rpx;
						margin-right: 15rpx;
					}

					.top-value {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: var(--maincolorf2);
						line-height: 36rpx;
					}
				}

				.item-center-li {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					line-height: 28rpx;
					padding: 20rpx 0;
					display: flex;
					align-items: center;

					.li-title {
						color: var(--maincolorf2);
					}

					.li-value {
						color: var(--maincolorf1);
					}
				}

				.item-reason {
					border-top: 1px solid #e5e5e5;
					padding: 24rpx 40rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #cc2929;
					line-height: 24rpx;
				}

				.orderDetails {
					display: flex;
					/* flex-direction: column;*/
					align-items: flex-start;
					justify-content: space-between;
					padding: 0 40rpx;
					font-size: 30rpx;

					.orderImg {
						width: 120rpx;
						height: 120rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}

					.orderInfo {
						width: 480rpx;

						.goodsName {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;

							text {
								background-color: #cccccc;
								color: #666;
								font-size: 24rpx;
								padding: 4rpx 20rpx;
								border-radius: 10rpx;
								margin-right: 10rpx;
							}
						}

						.goodsSpecs {
							font-size: 24rpx;
							color: #666;
							line-height: 2;
						}

						.goodsPrice {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.goodsCount {
								font-size: 24rpx;
								color: #666;
							}
						}

						.goodsPack {
							margin-top: 10rpx;
							padding-bottom: 20rpx;

							/* border-top: 2rpx solid #999;*/
							.packItem {
								.packTop {
									display: flex;
									align-items: center;
									justify-content: space-between;
									line-height: 2.4;
									font-size: 26rpx;

									.packGoodsName {
										width: 240rpx;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
								}

								.packBottom {
									display: flex;
									align-items: center;
									justify-content: space-between;
									font-size: 24rpx;
									color: #666;
								}
							}
						}
					}
				}
			}
		}

		.myBook-container-empty {
			padding-top: 144rpx;
			display: flex;
			flex-direction: column;
			/* justify-content: center;*/
			align-items: center;

			.empty-img {
				width: 360rpx;
				height: 360rpx;
				margin: 0 auto;
			}

			.empty-title {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: var(--third--self--color);
				line-height: 32rpx;
				padding: 24rpx 0 58rpx;
			}

			.bottom-button {
				background: var(--dt-backcolorPink);
				border-radius: 40rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: var(--maincolor);
				line-height: 80rpx;
				text-align: center;
				width: 240rpx;
				height: 80rpx;
			}
		}
	}

	.cancle-container {
		padding: 0 48rpx;

		.title {
			margin-top: 20px;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #212121;
			line-height: 32rpx;
			padding: 0rpx 0 20rpx;
		}

		.cancle-container-choose {
			padding-top: 4rpx;

			.choose-reason {
				border-radius: 8rpx;
				border: 2rpx solid #e5e5e5;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: var(--maincolorf2);
				line-height: 28rpx;
				padding: 0 24rpx;
				height: 75rpx;
				line-height: 75rpx;
				position: relative;

				&.selected {
					color: var(--maincolorf1);
				}

				&::after {
					content: '';
					position: absolute;
					top: 34rpx;
					right: 24rpx;
					width: 18rpx;
					height: 12rpx;
					background-image: url('https://oss.jtmckj.com/wmp/images/common/i_triangle_bottom-gray.png');
					background-size: 100% auto;
					background-position: right center;
					background-repeat: no-repeat;
				}
			}
		}

		.cancle-container-other {
			margin-bottom: 60rpx;

			.textarea {
				background: #fff;
				border-radius: 8rpx;
				border: 2px solid #f4f4f4;
				padding-left: 24rpx;
				/* padding: 33rpx 40rpx 20rpx;*/
			}

			.textarea-input {
				height: 80rpx !important;
				/* font-family: PingFang SC;*/
				/* font-weight: 500;*/
				font-size: 28rpx;
				color: #212121 !important;
				line-height: 42rpx;
			}

			.van-field__placeholder {
				color: var(--maincolorf2) !important;
			}
		}

		.cancle-container-bottom {
			width: 510rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 40rpx;

			.btn-cancle {
				width: 240rpx;
				height: 80rpx;
				border-radius: 40rpx;
				border: 2rpx solid var(--maincolorf2);
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: var(--maincolorf2);
				line-height: 80rpx;
				text-align: center;
			}

			.btn-comfirm {
				width: 240rpx;
				height: 80rpx;
				text-align: center;
				background: #212121;
				border-radius: 40rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #ffffff;
				line-height: 80rpx;
			}
		}
	}

	.call-container {
		width: 500rpx;
		background: #ffffff;
		border-radius: 16rpx !important;
		text-align: center;

		.phone-value {
			padding-top: 80rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #212121;
			line-height: 36rpx;
		}

		.phone-title {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: var(--maincolorf2);
			line-height: 26rpx;
			padding: 47rpx 0 60rpx;
		}

		.phone-icon {
			width: 100rpx;
			height: 100rpx;
			padding-bottom: 60rpx;
			/* background-image: url("https://oss.jtmckj.com/wmp/images/center/i_phone.png");*/
			/* background-size: 100% 100%;*/
			/* background-repeat: no-repeat;*/
		}
	}

	.x-popup .van-popup {
		border-radius: 16rpx !important;
	}

	.pre-lable {
		margin-top: 40rpx;
		width: 150rpx;
		height: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: var(--maincolorf2);
		line-height: 28rpx;
	}

	.pre-value {
		margin-top: 40rpx;
		width: 400rpx;
		height: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: var(--maincolorf2);
		line-height: 28rpx;
		text-align: right;
	}

	.pre-book {
		width: 600rpx;

		.pre-book-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: var(--maincolorf1);
			line-height: 36rpx;
			text-align: center;
			padding: 60rpx 0 40rpx;
		}

		.pre-book-main {
			padding: 0 48rpx;

			.main-item {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: var(--maincolorf2);
				line-height: 56rpx;
				text-align: left;
			}
		}

		.pre-book-bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 40rpx 40rpx;

			.btn-cancle {
				width: 240rpx;
				height: 80rpx;
				border-radius: 40rpx;
				border: 2rpx solid var(--maincolorbd4);
				text-align: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: var(--maincolorf4);
				line-height: 80rpx;
			}

			.btn-comfirm {
				width: 240rpx;
				height: 80rpx;
				background: var(--mainbaccolor4);
				border-radius: 40rpx;
				text-align: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: var(--maincolor);
				line-height: 80rpx;
			}
		}
	}

	.item-footer {
		border-top: 1px solid var(--maincolorbd3);
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 20rpx 24rpx;

		.item-footer-btn {
			padding: 16rpx 0;
			width: 150rpx;
			text-align: center;
			background: var(--dt-backcolorPink);
			border-radius: 8rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: var(--maincolor);
			line-height: 28rpx;
			margin-left: 20rpx;
		}
	}

	.myBook-container-empty {
		padding-top: 144rpx;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		align-items: center;

		.empty-img {
			width: 360rpx;
			height: 360rpx;
			margin: 0 auto;
		}

		.empty-title {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: var(--maincolorf2);
			line-height: 32rpx;
			padding: 24rpx 0 58rpx;
		}

		.bottom-button {
			background: var(--dt-backcolorPink);
			border-radius: 40rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: var(--maincolor);
			line-height: 80rpx;
			text-align: center;
			width: 240rpx;
			height: 80rpx;
		}
	}

	.item-reason {
		border-top: 1px solid var(--maincolorbd3);
		padding: 24rpx 40rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: var(--maincolorf5);
		line-height: 24rpx;
	}

	::v-deep .popup-content {
		padding: 0;
	}

	::v-deep .u-picker .u-toolbar__wrapper__cancel {
		color: var(--maincolorf2) !important;
	}

	::v-deep .u-picker .u-toolbar__wrapper__confirm {
		color: var(--maincolorf1) !important;
	}

	::v-deep .van-cell--borderless {
		border: 1rpx solid #e5e5e5 !important;
		border-radius: 8rpx;
	}

	.tabs-contianr {
		border-bottom: none !important;
	}
</style>